<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
	 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人信息</title>
		<link rel="stylesheet" type="text/css" href="/wk3un7/backstage/lib/css/layui.css" />
<style type="text/css">
  .layui-table-cell{
    height: auto !important;
  }
</style>
	</head>
	<body>
		<form class="layui-form">
			<!-- 公司电话 -->
			  <div class="layui-form-item">
				<label class="layui-form-label">用户名：</label>
				<div class="layui-input-block">
					<input type="text" name="userName" required lay-verify="required" value="${homeAll.userName }" autocomplete="off" class="layui-input" readonly="true">
				</div>
			</div>  
			<!-- 公司邮箱 -->
			  <div class="layui-form-item">
				<label class="layui-form-label">手机号：</label>
				<div class="layui-input-block">
					<input type="text" name="userPhone" required lay-verify="required" value="${homeAll.userPhone }" autocomplete="off" class="layui-input" readonly="true">
				</div>
			</div>  
			<!-- 公司地址 -->
		  <div class="layui-form-item">
				<label class="layui-form-label">邮箱：</label>
				<div class="layui-input-block">
					<input type="text" name="userEmail" required lay-verify="required" value="${homeAll.userEmail }" autocomplete="off" class="layui-input">
				</div>
			</div>  
			<!-- 公司地址 -->
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red;">*</span>头像地址</label>
				<div class="layui-input-inline">
					<button type="button" class="layui-btn" id="test1">
				  			<i class="layui-icon">&#xe67c;</i>上传图片
					</button>
					<img id="imgFace" style="width: 120px;" src="" >
					<input type="hidden" id="userImg" name="userImg" required lay-verify="required" placeholder="${homeAll.userImg }" autocomplete="off" class="layui-input">
				</div>
			</div>
		 <!--  <div class="layui-form-item">
				<label class="layui-form-label">头像地址：</label>
				<div class="layui-input-block">
				<img alt="" src="${homeAll.userImg }" style="width:120px;height:100px" id="imgtmp">
					<input type="text" name="userImg" required lay-verify="required" value="${homeAll.userImg }" autocomplete="off" class="layui-input">
				</div>
			</div>  
			 -->
			<!-- 公司邮箱 -->
			  <div class="layui-form-item">
				<label class="layui-form-label">家庭住址：</label>
				<div class="layui-input-block">
					<input type="text" name="userUrl" required lay-verify="required" value="${homeAll.userUrl }" autocomplete="off" class="layui-input">
				</div>
			</div>  
			<!-- 公司介绍 -->
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">个性签名</label>
				<div class="layui-input-block">
					<textarea name="userHobby" placeholder="请输入内容" class="layui-textarea">${homeAll.userHobby }</textarea>
				</div>
			</div>  
			<div class="layui-form-item" style="margin-bottom: 130px;">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
		
		<script src="/wk3un7/backstage/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script>
			//Demo
			layui.use(['form','upload'], function() {
				var form = layui.form;
				var $ = layui.jquery; //引入jquery
				 var layer = layui.layer;
				 var upload = layui.upload;
				//监听提交
				  //执行实例
						  var uploadInst = upload.render({
						    elem: '#test1' //绑定元素
						    ,url: '/wk3un7/userServlet?method=upload' //上传接口
						    ,done: function(res){
						      $("#userImg").val('upload/'+res.data);
						      $("#imgFace").attr('src','upload/'+res.data);
						      
						    	//上传完毕回调
						    }
						    ,error: function(){
						      //请求异常回调
						    }
						  });
				form.on('submit(formDemo)', function(data) {
					var d = data.field; //表单中的数据，定义一个对象来接收
					//通过ajax向数据库提交数据了
					d.method = "personalUpdate";//执行的方法
					console.log(2);
					console.log(d); //提交之前的一个数据验证、通过打印的方式先手动的去判断一下这个数据
					var url ='/wk3un7/userServlet';//请求服务器的地址
					//确保数据没有问题就进行ajax提交了
					  $.post(url, d,
						function(data) {
							if(data.count>0){
								console.log('添加成功');
								layer.msg('修改成功');
								var index=parent.layer.getFrameIndex(window.name); //获取当前窗口的name
             					 parent.layer.close(index);		//关闭窗口
							}
						}, "json"); 
					return false;
				});
			});
		</script>
	</body>
</html>
